<template>
  <div class="server">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button type="text" size="small" @click="active = 0" :class="active === 0 ? 'active' : ''"> 微信官方配置</el-button>
      <el-button type="text" size="small" @click="active = 1" :class="active === 1 ? 'active' : ''"> 支付宝ISV配置</el-button>
      <el-button type="text" size="small" @click="active = 2" :class="active === 2 ? 'active' : ''"> 网商银行通道配置</el-button>
      <el-button type="text" size="small" @click="active = 3" :class="active === 3 ? 'active' : ''"> 平安银行通道配置</el-button>
      <el-button type="text" size="small" @click="active = 4" :class="active === 4 ? 'active' : ''"> 新大陆通道配置</el-button>
      <el-button type="text" size="small" @click="active = 5" :class="active === 5 ? 'active' : ''"> 乐刷通道配置</el-button>
      <el-button type="text" size="small" @click="active = 6" :class="active === 6 ? 'active' : ''"> 富民通道配置</el-button>
    </el-row>
    <el-row class="container">
      <wx-setting v-if="active === 0"></wx-setting>
      <zfb-setting v-else-if="active === 1"></zfb-setting>
      <ws-setting v-else-if="active === 2"></ws-setting>
      <pa-setting v-else-if="active === 3"></pa-setting>
      <starpos-setting v-else-if="active === 4"></starpos-setting>
      <le-setting v-else-if="active === 5"></le-setting>
      <fu-setting v-else-if="active === 6"></fu-setting>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import WxSetting from './components/wx-setting'
import ZfbSetting from './components/zfb-setting'
import PaSetting from './components/pa-setting'
import WsSetting from './components/ws-setting'
import StarposSetting from './components/starpos-setting'
import LeSetting from './components/le-setting'
import FuSetting from './components/fu-setting'

export default {
  name: 'paySetting',
  components: {
    Breadcrumb,
    WxSetting,
    ZfbSetting,
    WsSetting,
    PaSetting,
    LeSetting,
    FuSetting,
    StarposSetting
  },
  data() {
    return {
      active: 0,
      adminId: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.server{
  .el-row{
    .el-button{
      border-radius: unset;
      padding: 5px 15px;
      background: #d2d2d2;
      color: #666;
    }
    .active{
      color: #fff;
      background: #007eff;
    }
  }
  .container{
    padding: 20px 0 0 0;
   /deep/ .el-textarea{
      font-size: 12px;
    }
  }
}
</style>
